<template>
    <div>
        <div class="container">
            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
                <el-form-item label="用户名" prop="username">
                    <el-input class="w" v-model="form.username"></el-input>
                </el-form-item>

                <el-form-item label="登录名" prop="loginName">
                    <el-input class="w" v-model="form.loginName"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input class="w" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input class="w" v-model="form.confirmPassword"></el-input>
                </el-form-item>

                <el-form-item label="Email" prop="email">
                    <el-input class="w" v-model="form.email"></el-input>
                </el-form-item>

                <el-form-item label="曲库系统" prop="qukuSys">
                    <!-- <el-input class="w" v-model="form.qukuSys"></el-input> -->
                    <el-radio v-model="form.qukuSys" label="0">是</el-radio>
                    <el-radio v-model="form.qukuSys" label="1">否</el-radio>
                    <div class="sel-wrapper">
                        <label for="sel1">
                            <span>可用的角色</span>
                            <select name="" id="sel1" size="10" multiple>
                                <option value="0">管理员</option>
                                <option value="1">编辑</option>
                                <option value="2">普通用户</option>
                                <option value="3">cp</option>
                            </select>
                        </label>
                        <input type="button" value=">>>" />
                        <input type="button" value="<<<" />
                        <input type="button" value=">" />
                        <input type="button" value="<" />
                        <label for="sel2">
                            <span>已添加 </span>
                            <select name="" id="sel2" multiple></select>
                        </label>
                    </div>
                </el-form-item>

                <el-form-item label="版权系统" prop="copyrightSys">
                    <el-radio v-model="form.copyrightSys" label="0">是</el-radio>
                    <el-radio v-model="form.copyrightSys" label="1">否</el-radio>
                </el-form-item>

                <el-form-item label="运营系统" prop="operateSys">
                    <el-radio v-model="form.operateSys" label="0">是</el-radio>
                    <el-radio v-model="form.operateSys" label="1">否</el-radio>
                </el-form-item>

                <el-form-item label="结算系统" prop="calcSys">
                    <el-radio v-model="form.calcSys" label="0">是</el-radio>
                    <el-radio v-model="form.calcSys" label="1">否</el-radio>
                </el-form-item>
                <!-- <el-form-item label="类型" prop="checkType">
                    <el-select :clearable="true" v-model="form.checkType" placeholder="请选择歌单类型" class="handle-select mr10">
                        <el-option key="0" label="流行" value="0"></el-option>
                        <el-option key="1" label="摇滚" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="语言">
                    <el-select :clearable="true" v-model="form.address2" placeholder="请选择语言" class="handle-select mr10">
                        <el-option key="0" label="区域一" value="0"></el-option>
                        <el-option key="1" label="区域二" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="风格">
                    <el-select :clearable="true" v-model="form.address3" placeholder="请选择风格" class="handle-select mr10">
                        <el-option key="0" label="流行" value="0"></el-option>
                        <el-option key="1" label="摇滚" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="热度">
                    <el-select :clearable="true" v-model="form.address4" placeholder="请选择热度" class="handle-select mr10">
                        <el-option key="0" label="区域一" value="0"></el-option>
                        <el-option key="1" label="区域二" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="分类1">
                    <el-select :clearable="true" v-model="form.address5" placeholder="请选择风格" class="handle-select mr10">
                        <el-option key="0" label="流行" value="0"></el-option>
                        <el-option key="1" label="摇滚" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <!-- <el-form-item label="分类2">
                    <el-select :clearable="true" v-model="form.address6" placeholder="请选择风格" class="handle-select mr10">
                        <el-option key="0" label="流行" value="0"></el-option>
                        <el-option key="1" label="摇滚" value="1"></el-option>
                    </el-select>
                </el-form-item> -->

                <el-form-item>
                    <el-button type="reset" @click="handleReset">取消</el-button>
                    <el-button type="primary" @click="handleSave">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AddUser',
    data() {
        return {
            query: {
                // address: '',
                // name: '',
                // pageIndex: 1,
                // pageSize: 10,
                // checkType: ''
            },
            rules: {
                username: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                loginName: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                password: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                confirmPassword: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                qukuSys: [{ required: true, message: '请选择类型', trigger: 'change' }],
                copyrightSys: [{ required: true, message: '请选择类型', trigger: 'change' }],
                operateSys: [{ required: true, message: '请选择类型', trigger: 'change' }],
                calcSys: [{ required: true, message: '请选择类型', trigger: 'change' }]
                // songsheet: [{ required: true, message: '请选择歌单数量', trigger: 'blur' }],
                // song: [{ required: true, message: '请选择歌曲数量', trigger: 'blur' }],
                // checkType: [{ required: true, message: '请选择类型', trigger: 'change' }]
            },
            form: {
                username: '',
                loginName: '',
                password: '',
                confirmPassword: '',
                email: '',
                qukuSys: '0',
                copyrightSys: '0',
                operateSys: '0',
                calcSys: '0'

                // songsheet: '',
                // song: '',
                // checkType: ''
            }
        };
    },
    created() {},
    mounted() {
        this.$nextTick(() => {
            this.bindEvent();
        });
    },
    methods: {
        bindEvent() {
            var inpArr = document.querySelectorAll('.sel-wrapper input');
            var sel1 = document.querySelector('.sel-wrapper #sel1');
            var sel2 = document.querySelector('.sel-wrapper #sel2');
            inpArr[0].onclick = function() {
                var arr = sel1.children;
                for (var i = arr.length - 1; i >= 0; i--) {
                    sel2.appendChild(arr[0]);
                }
            };
            inpArr[1].onclick = function() {
                var arr = sel2.children;
                for (var i = arr.length - 1; i >= 0; i--) {
                    sel1.appendChild(arr[0]);
                }
            };
            inpArr[2].onclick = function() {
                var arr = sel1.children;
                for (var i = arr.length - 1; i >= 0; i--) {
                    if (arr[i].selected === true) {
                        arr[i].selected = false;
                        sel2.appendChild(arr[i]);
                    }
                }
                var aaa = Array.from(sel2.children).sort(function(a, b) {
                    return a.value - b.value;
                });
                for (var i = 0; i < sel2.children.length; i++) {
                    sel2.removeChild(sel2.children[i]);
                }
                for (var i = 0; i < aaa.length; i++) {
                    sel2.appendChild(aaa[i]);
                }
            };
            //同理
            inpArr[3].onclick = function() {
                var arr = sel2.children;
                //遍历判断数组中的元素selected属性为true的，添加到相反的select标签中
                for (var i = arr.length - 1; i >= 0; i--) {
                    if (arr[i].selected === true) {
                        arr[i].selected = false;
                        sel1.appendChild(arr[i]);
                    }
                }
                //获取sel1中的子元素变成新的一个数组，然后排序
                var aaa = Array.from(sel1.children).sort(function(a, b) {
                    return a.value - b.value;
                });
                //删除所有子元素
                for (var i = 0; i < sel1.children.length; i++) {
                    sel1.removeChild(sel1.children[i]);
                }
                //把排好的数组添加到sel1中
                for (var i = 0; i < aaa.length; i++) {
                    sel1.appendChild(aaa[i]);
                }
            };
        },
        handleSave() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    this.$router.replace({
                        path: '/user-list',
                        query: {
                            id: '555'
                        }
                    });
                })
                .catch(() => {});
        },
        handleReset() {
            this.$router.replace({
                path: '/user-list',
                query: {
                    id: '555'
                }
            });
        }
    }
};
</script>

<style scoped lang="scss">
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    /* width: 120px; */
    width: 185px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.w {
    width: 470px;
}
.sel-wrapper {
    margin-top: 40px;
    input {
        width: 40px;
        height: 30px;
        transform: translate(0, -100px);
    }
    label {
        display: inline-block;
        width: 180px;
        height: 200px;
        position: relative;

        span {
            position: absolute;
            left: 0;
            top: -32px;
            width: 100%;
            border: 1px solid #666;
            text-align: center;
            border-bottom: none;
            box-sizing: border-box;
        }
        select {
            text-align: center;
            width: 100%;
            height: 100%;
            font-size: 16px;
            background-color: #fff;
            outline: none;
        }
    }
}
</style>
